<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            background-color: pink;
            border-radius: 0%;
        }
    </style>
</head>

<body>
    <button onclick="console.log('hhahhh')">点击了我</button>
    <div class="box1">1</div>
    <div class="box1">2</div>
    <div class="box1">3</div>
    <input type="text" name="input" placeholder="输入框">
    <script src="./my.js">
    </script>
    <script>
        // 变量
        let num1 = 1
        num1 = 5
        console.log('num=' + num1)
        // 常量
        const PI = 3.14
        console.log('圆周率是' + PI)
        // 遍历
        let names = ['jake', 'rose', 'one']
        for (let i = 0; i < names.length; i++) {
            console.log(names[i])
        }
        // 对象
        let person = { name: 'jack', age: 18 }
        for (let key in person) {
            console.log(person[key])
        }
        // 箭头函数
        function test(num1, num2 = 2, ...num3) {
            console.log('num1' + num1)
        }
        test(1, 2, 3, 4, 5)
        // 获取dom对象
        let div = document.querySelector('div')

        console.log(div);
        div.onclick = () => {
            console.log('点击了第一个div');
            div.style.backgroundColor = 'red'
        }

        // 获取所有dom对象
        let domArray = document.querySelectorAll('div')
        console.log(domArray);
        const currentDiv = domArray[1]

        // 给dom对象绑定事件
        // currentDiv.addEventListener('click', function () {
        //     console.log('点击了第一个div' + this);
        // })
        currentDiv.addEventListener('mouseenter', function () {
            console.log('鼠标移入');
            currentDiv.style.backgroundColor = 'yellow'
        })
        currentDiv.addEventListener('mouseleave', function () {
            console.log('鼠标移出');
            currentDiv.style.backgroundColor = 'green'
        })

        // 获取dom对象
        let input = document.querySelector('input')
        input.addEventListener('focus', function (e) {
            console.log('获取焦点');
            e.target.style.width = '200px'
            e.target.style.height = '60px'

        })
        input.addEventListener('blur', function (e) {
            console.log('失去焦点');
            e.target.style.width = '100px'
            e.target.style.height = '20px'


        })

        input.addEventListener('keyup', function (e) {
            console.log(e.target.value);
        })
        input.addEventListener('input', function (e) {
            console.log(e.target.value);
        })



    </script>
</body>

</html>